<template>

      <div class="main">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="申请客户"  >
            <el-select
              v-model="formData.customerId"
              @change="showMortgages"
              placeholder="请选择客户"
            >
              <el-option
                :label="customer.user.name"
                :value="customer.id"
                v-for="customer in customers"
                :key="customer.id"
                >{{ customer.user.name }}</el-option
              >
            </el-select>
          </el-form-item>

          <el-form-item label="贷款产品">
            <el-select v-model="formData.proId" placeholder="请选择贷款产品">
              <el-option
                :label="product.name"
                :value="product.id"
                v-for="product in products"
                :key="product.id"
                >{{ product.name }}</el-option
              >
            </el-select>
          </el-form-item>

          <el-form-item label="贷款金额">
            <el-input
              v-model="formData.money"
              maxlength="20"
              minlength="3"
              show-word-limit
    
              placeholder="请输入贷款金额"
            ></el-input>
          </el-form-item>

          <el-form-item label="收款账号">
            <el-input
              v-model="formData.acceptAccount"
              maxlength="20"
              minlength="3"
              show-word-limit
           
              placeholder="请输入收款账号"
            ></el-input>
          </el-form-item>

          <el-form-item label="审核员">
            <el-select v-model="formData.empId" placeholder="请选择审核员">
              <el-option
                :label="emp.name"
                :value="emp.id"
                v-for="emp in emps"
                :key="emp.id"
                >{{ emp.name }}</el-option
              >
            </el-select>
          </el-form-item>

          <el-form-item label="抵押资产" v-if="formData.customerId != 0">
            <el-checkbox-group v-model="formData.mortgageIds">
              <el-checkbox
                :label="mor.id"
                v-for="mor in mortgages"
                :key="mor.id"
                name="mortgageId"
                :disabled="mor.appId!=null"
                >{{ mor.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="add">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

</template>

<script>
import global from "@/global.js";
export default {
  created() {
    /*
     *获取客户列表
     */
    this.$axios
      .post(global.server + "/api/customer/condition")
      .then((response) => {
        let result = response.data;
        if (result.code == 200) {
          this.customers = result.data;
          console.log("customer---->");
          console.log(this.customers);
        }
      });

    /*
     *获取产品列表
     */
    this.$axios.post(global.server + "/api/product/getAll").then((response) => {
      console.log("产品信息", response.data);
      let result = response.data;
      if (result.code == 200) {
        console.log("产品信息", result.data);
        this.products = result.data;
      }
    });

    /*
     *获取emp列表
     */
    this.$axios.post(global.server + "/api/emp/list").then((response) => {
      console.log("emps-----------------------------|");
      console.log(response);
      let result = response.data;
      if (result.code == 200) {
        this.emps = result.data;
      }
    });
  },
  data() {
    return {
      customers: "",
      products: [],
      emps: "",
      mortgages: "",
      empId: 0,
      formData: {
        customerId: "",
        proId: "",
        acceptAccount: "",
        money: "",
        mortgageIds: [],
      },

      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { min: 3, max: 5, message: "长度在 3 到 20 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    showMortgages() {
      console.log("show");
      /*
       *获取客户的资产列表
       */
      this.$axios
        .post(global.server + "/api/mortgage/byCid/" + this.formData.customerId)
        .then((response) => {
          let result = response.data;
          if (result.code == 200) {
            console.log("该客户的资产", result.data);
            this.mortgages = result.data;
            this.formData.mortgageIds = [];
          }
        });
    },

    /*

                *提交申请
                */
    add() {
      console.log("申请信息---------------");
      console.log(this.formData);
      this.$axios
        .post(global.server + "/api/app/add", this.formData)
        .then((response) => {
          console.log(response);
          let result = response.data;
          if (result.code == 200) {

            /**
             * 重新展示资产
             */
              this.showMortgages();

            this.$alert("提交成功!请等待审核");
          }
        });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

/**
 * 弹框
 */
    open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
  },
};
</script>

<style scope>
.main{
  width: 319px;
  /* margin: auto; */
  /* border: 1px solid #ccc; */
}

</style>